* {
    /* 初始化 */
    margin: 0;
    padding: 0;
    /* 元素的总宽度和高度包含内边距和边框 */
    box-sizing: border-box;
}

body {
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg,#e7f0fd,#accbee);
}

.container {
    /* 相对定位 */
    position: relative;
    /* 弹性布局 横向排列 允许换行 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .container .box {
        position: relative;
        width: 275px;
        height: 275px;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 动画过渡 */
        transition: 0.5s;
    }
        /* 鼠标移入，盒子变大 */
        .container .box:hover {
            transform: scale(1.25);
            box-shadow: 0 25px 40px rgba(0,0,0,0.5);
            z-index: 1;
        }

        .container .box .img-box {
            /* 绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
            /* 渐变遮罩（黑色——透明） 默认隐藏 */
            .container .box .img-box::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(to top,#fff,transparent);
                z-index: 1;
                opacity: 0;
                transition: 0.5s;
            }
        /* 鼠标移入，渐变遮罩显示 */
        .container .box:hover .img-box::before {
            opacity: 1;
        }

        .container .box .img-box img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /* 保持原有尺寸比例，裁切长边 */
            object-fit: cover;
        }

        .container .box .text-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 20px;
            /* 弹性布局 元素位于容器的结尾 */
            display: flex;
            align-items: flex-end;
            color: #fff;
            z-index: 2;
        }

            .container .box .text-box h2 {
                font-size: 20px;
                margin-bottom: 10px;
                /* 默认移出可视范围 */
                transform: translateY(200px);
                transition: 0.5s;
            }

        .container .box:hover .text-box h2 {
            /* 鼠标移入，移入可视范围 */
            transform: translateY(0);
            /* 设置动画延迟时间 */
            transition-delay: 0.3s;
        }

        .container .box .text-box p {
            font-size: 13px;
            line-height: 20px;
            /* 默认移出可视范围 */
            transform: translateY(200px);
            transition: 0.5s;
        }

        .container .box:hover .text-box p {
            /* 鼠标移入，移入可视范围 */
            transform: translateY(0);
            /* 设置动画延迟时间 */
            transition-delay: 0.4s;
        }
